// @ts-nocheck
<script setup lang="ts">
import { reactive, ref } from 'vue'
import { useSendCommand } from '@/api/gps/gps'
import { getDeviceCmd } from '@/api/gps/command_type'
import { ElMessage } from 'element-plus'

const dialogVisible = ref(false)
const cmdList = ref<any[]>([])
const queryForm = reactive({
  imei: '',
  cmdId: ''
})
const dataForm = reactive<any>({
  cmdTypeStr: '',
  cmdDesc: null,
  cmdIsSync: null,
  cmdNeedPwd: null,
  cmdParams: null,
  cmdType: null,
  params: '',
  cmdPwd: '',
  cmdCacheSec: ''
})

const btnLoading = ref(false)
function init(imei) {
  dialogVisible.value = true
  queryForm.imei = imei

  getAllCmd()
}

/**
 * 获取全部指令
 */
function getAllCmd() {
  getDeviceCmd(queryForm.imei).then((res) => {
    cmdList.value = res.data
    queryForm.cmdId = cmdList.value[0]?.predictCmdId
    handleChange(queryForm.cmdId)
  })
}

function handleChange(val) {
  const data: any = cmdList.value.find((item) => item.predictCmdId === val)
  dataForm.cmdParams = null
  dataForm.cmdType = data.cmdType || null
  dataForm.cmdDesc = data.cmdDesc || null
  dataForm.cmdTypeStr = data.cmdCode
  dataForm.cmdIsSync = data.sync
  dataForm.cmdNeedPwd = data.cmdPwd
  if (data.params) {
    dataForm.cmdParams = parseXML(data.params)
  }
}

function parseXML(param) {
  let paramsListObj = [] as any[]
  const params = '<params>' + param + '</params>'
  const parser = new DOMParser()
  const xmlDoc = parser.parseFromString(params, 'text/xml')
  const parent = xmlDoc.children[0]
  const children = parent.children
  for (let i = 0; i < children.length; i++) {
    const item = children[i]
    const desc = item.innerHTML
    const type = item.getAttribute('type')
    const value = item.getAttribute('value')
    if (type && desc) {
      paramsListObj.push({
        type: type,
        desc: desc,
        value: value
      })
    }
  }
  return paramsListObj
}

function handleClose() {
  dialogVisible.value = false
}

function handleSendCmd() {
  if (!dataForm.cmdTypeStr) {
    ElMessage.error('请选择需要发送的指令!')
  }
  btnLoading.value = true
  let params
  if (dataForm.cmdType === 'text') {
    params = dataForm.cmdParams && dataForm.cmdParams.map((item) => item.value)
  } else if (dataForm.cmdType === 'list') {
    params = dataForm.params && [dataForm.params]
  }

  const data = {
    imei: queryForm.imei,
    type: dataForm.cmdTypeStr,
    id: queryForm.cmdId,
    sync: dataForm.cmdIsSync,
    cacheSec: dataForm.cmdIsSync ? null : dataForm.cmdCacheSec,
    password: dataForm.cmdNeedPwd ? dataForm.cmdPwd : null,
    params
  }

  useSendCommand(data)
    .then((res) => {
      ElMessage.success('发送指令成功！')
      handleClose()
    })
    .finally(() => {
      btnLoading.value = false
    })
}

defineExpose({
  init
})
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    title="发送指令"
    width="500px"
    append-to-body
    destroy-on-close
    @close="handleClose">
    <div class="s_raido">
      <el-select v-model="queryForm.cmdId" @change="handleChange">
        <el-option v-for="cmd in cmdList" :key="cmd.predictCmdId" :label="cmd.cmdName" :value="cmd.predictCmdId" />
      </el-select>
      <div v-if="dataForm.cmdDesc" style="width: 100%">命令描述： {{ dataForm.cmdDesc }}</div>
      <el-divider>基本参数</el-divider>
      <div style="margin: 10px 0"><span>同步命令：</span><el-switch v-model="dataForm.cmdIsSync"></el-switch></div>
      <el-form v-if="!dataForm.cmdIsSync" label-position="left" label-width="150px">
        <el-form-item label="此指令超时时间(秒)">
          <el-input v-model="dataForm.cmdCacheSec" placeholder=""></el-input>
        </el-form-item>
      </el-form>
      <el-form v-if="dataForm.cmdNeedPwd" label-position="left" label-width="100px">
        <el-form-item label="命令密码">
          <el-input v-model="dataForm.cmdPwd" placeholder=""></el-input>
        </el-form-item>
      </el-form>
      <div v-if="dataForm.cmdParams">
        <el-divider>请填写命令参数</el-divider>
      </div>
      <template v-if="dataForm.cmdType === 'text'">
        <el-form label-position="top">
          <el-form-item v-for="(param, index) in dataForm.cmdParams" :key="index" :label="param.desc">
            <el-input v-model.trim="dataForm.cmdParams[index].value"></el-input>
          </el-form-item>
        </el-form>
      </template>
      <div v-if="dataForm.cmdType === 'list'" style="margin-top: 20px">
        <el-radio-group v-if="dataForm.cmdParams" v-model="dataForm.params">
          <el-radio v-for="(param, index) in dataForm.cmdParams" :key="index" :label="param.value">{{
            param.desc
          }}</el-radio>
        </el-radio-group>
      </div>
    </div>
    <template #footer>
      <el-button @click="handleClose">取消发送</el-button>
      <el-button v-if="dataForm.cmdTypeStr" type="primary" :loading="btnLoading" @click="handleSendCmd"
        >发送指令</el-button
      >
    </template>
  </el-dialog>
</template>

<style scoped lang="scss"></style>
